<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding:0;margin:0;}
			#imgs{height:454px;width:730px;margin:30px auto;
				position:relative;background: #eee;
			}
			#list-imgs{list-style:none;
				position:absolute;left:0;top:0;	
			}
			#list-imgs li{position:absolute;left:0;top:0;
				opacity:0;filter:alpha(opacity=0);
			}
			#list-imgs .flash-opacity{opacity:1;filter:alpha(opacity=100);}
			#pre-btn{list-style:none;
				
				position:absolute;bottom:10px;
				width:100%;text-align:center;
			}
			#pre-btn li{width:18px;display:inline-block;
				height:18px;background:#3e3e3e;
				margin:0 4px;border-radius:50%;
				font-size:12px;color:#fff;
				line-height: 18px;cursor:pointer;
			}
			#pre-btn .active{background:#c81623;}
			#move-btn{display:none;}
			#move-btn a{
				height:62px;width:28px;
				position:absolute;
				top:50%;margin-top:-31px;
				background:rgba(0,0,0,.2);
				text-decoration: none;
				color:#fff;font-size:24px;
				line-height:62px;text-align: center;
				
			}
			#move-btn #right{position:absolute;
				right:0;
				top:50%;margin-top:-31px;}
		</style>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			(function($){
				$(function(){
					var
						iCurIndex=0,
						timer=null;
					//鼠标在imgs上移入移出的效果
					$('#imgs').hover(function(){
						clearInterval(timer);
						$('#move-btn').css('display','block');
					},function(){
						autoMove();
						$('#move-btn').css('display','none');
					});
					//左右两侧的按钮点击效果
					$("#left").click(function(){
						iCurIndex--;
						move();
					});
					$("#right").click(function(){
						iCurIndex++;
						move();
					});
					
					//定时运动
					autoMove();
					function autoMove(){
						timer=setInterval(function(){
							iCurIndex++;
							move();
						},3000)
					}
					
					//鼠标划过pre-btn时图片变换
					$('#pre-btn').on('mouseover','li',function(){
						var iIndex=$(this).index();
						if(iIndex===iCurIndex){
							return;
						}
						iCurIndex=iIndex;
						move();
					})
					
					//move运动函数
					function move(){
						if(iCurIndex<0){
							iCurIndex=$('#list-imgs li').length-1;
						}
						if(iCurIndex>=$('#list-imgs li').length){
							iCurIndex=0;
						}
						$('#list-imgs li').stop(true).animate({
							opacity:0
						},500).eq(iCurIndex).stop().animate({
							opacity:1
						},500);
						$('#pre-btn li').removeClass('active').eq(iCurIndex).addClass('active');
					}
				});
			})(jQuery);
		</script>
	</head>
	<body>
		<div id="imgs">
			<ul id="list-imgs">
				<li class="flash-opacity"><a href="#"><img src="images/1.jpg"></a></li>
				<li><a href="#"><img src="images/2.jpg"></a></li>
				<li><a href="#"><img src="images/3.jpg"></a></li>
				<li><a href="#"><img src="images/4.jpg"></a></li>
				<li><a href="#"><img src="images/5.jpg"></a></li>
				<li><a href="#"><img src="images/6.jpg"></a></li>
			</ul>
			<ul id="pre-btn">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<div id="move-btn">
				<a href="#" id="left"><</a>
				<a href="#" id="right">></a>	
			</div>
		</div>
	</body>
</html>
